<template>
	<view class="register">

		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage" style="background-color: #031725;"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="entity.realName" type="text" maxlength="20" :placeholder="$t('register.realName')"></wInput>
				<wInput v-model="entity.userName" type="text" maxlength="11" :placeholder="$t('register.userName')"></wInput>
				<wInput v-model="entity.password" type="password" maxlength="11" :placeholder="$t('register.password')" isShowPass></wInput>
				<wInput v-model="entity.password_" type="password" maxlength="11" :placeholder="$t('register.password_')"
				 isShowPass></wInput>
				<wInput v-model="entity.safePassword" type="password" maxlength="6" :placeholder="$t('register.safePassword')"
				 isShowPass></wInput>
				<wInput v-model="entity.safePassword_" type="password" maxlength="6" :placeholder="$t('register.safePassword_')"
				 isShowPass></wInput>
				<wInput v-model="entity.ymid" type="text" maxlength="11" :placeholder="$t('register.ymid')" isShowPass></wInput>
				<wInput v-model="entity.msgCode" type="number" maxlength="6" :placeholder="$t('register.msgCode')" isShowCode ref="runCode"
				 @setCode="yanzheng(1)"></wInput>
			</view>

			<wButton :text="$t('register.register')" :rotate="isRotate" @click.native="yanzheng(2)"></wButton>
			<!-- 底部信息 -->
			<view class="footer">
				<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'">{{$t('register.agree')}}</text>
				<!-- 协议地址 -->
				<navigator url="" open-type="navigate" @tap="modalName = 'Modal'">《{{$t('register.registerAgreement')}}》</navigator>
			</view>
			<view class="footer">
				<navigator url="forget" open-type="navigate">{{$t('login.RetrievePassword')}}</navigator>
				<text>|</text>
				<navigator url="login" open-type="navigate">{{$t('login.login')}}</navigator>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end" style="border-bottom: 1px solid #40576f;">
					<view class="content">{{newsInfo.title}}</view>
					<!-- <view class="action" @tap="modalName = ''">
						<text class="cuIcon-close text-red"></text>
					</view> -->
				</view>
				<view class="padding-xl" v-html="newsInfo.newsContent">
				</view>
				<view class="cu-bar bg-white justify-end" @tap="modalName = ''">
					<view class="content">{{$t('register.agree')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	var t;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button

	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '/static/logo.png',
				showAgree: true, //协议是否选择
				isRotate: false, //是否加载旋转
				entity: {
					realName: '',
					userName: '', // 用户/电话
					password: '', //密码
					password_: '', //密码
					safePassword: '',
					safePassword_: '',
					ymid: '',
					msgCode: "", //验证码
				},
				newsInfo: '',
				modalName: null,
			}
		},
		components: {
			wInput,
			wButton,
		},
		onLoad(a) {
			t = this;
			this.$i18n.locale = t.$common.localRead("local")
			t.getData();
			if (a.ymid) {
				t.entity.ymid = a.ymid
			}
		},
		methods: {
			getData: function() {
				let data = {
					modId: '20000000'
				}
				t.$fetch.request('newsInfo/getSingleNewsByModId', data).then((res) => {
					console.info(res)
					if (res.code == 200) {
						t.newsInfo = res.data.entity
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			},
			isShowAgree() {
				//是否选择协议
				t.showAgree = !t.showAgree;
			},
			yanzheng(type) {

				if (!t.entity.userName || t.entity.userName.length != 11) {
					this.$common.showToast(this.$t('register.userNameErr'))
					return false;
				}

				if (!t.entity.password) {
					this.$common.showToast(this.$t('register.passwordNotNull'))
					return false;
				}
				if (!t.entity.password_) {
					this.$common.showToast(this.$t('register.password_NotNull'))
					return false;
				}

				var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,20}');
				if (!pwdRegex.test(t.entity.password)) {
					this.$common.showToast(this.$t('register.passwordErr'))
					return false;
				}

				if (t.entity.password != t.entity.password_) {
					this.$common.showToast(this.$t('register.passwordUnequal'))
					return false;
				}

				if (!t.entity.safePassword) {
					this.$common.showToast(this.$t('register.safePasswordNotNull'))
					return false;
				}
				if (!t.entity.safePassword_) {
					this.$common.showToast(this.$t('register.safePassword_NotNull'))
					return false;
				}
				if (t.entity.safePassword != t.entity.safePassword_) {
					this.$common.showToast(this.$t('register.safePasswordUnequal'))
					return false;
				}

				if (!/^[0-9]+$/.test(t.entity.safePassword)) { //这是用正则表达是检查
					this.$common.showToast(this.$t('register.safePasswordNumber'))
					return false;
				}

				if (!t.entity.ymid) {
					this.$common.showToast(this.$t('register.InviterNotNull'))
					return false;
				}

				if (type == 1) {
					t.getMsgCode();
				} else {
					t.save();
				}
			},
			getMsgCode() {

				let data = {
					userName: t.entity.userName,
					password: t.entity.password,
					ymid: t.entity.ymid
				}

				this.$fetch.request('userInfo/sendMsgRegister', data, 'POST').then((res) => {
					if (res.code === 200) {
						this.$common.showToast(this.$t('msgCode.sendSuccess'))
						this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})


				// setTimeout(function() {
				// 	t.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
				// }, 3000)
			},
			save() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.showAgree == false) {
					this.$common.showToast(this.$t('register.agreeRegisterAgreement'))
					return false;
				}

				if (!this.entity.msgCode) {
					this.$common.showToast(this.$t('msgCode.msgCodeNotNull'))
					return false;
				}
				console.log("注册成功")
				t.isRotate = true
				setTimeout(function() {
					t.isRotate = false
				}, 3000)

				// let data = {
				// 	userName: t.userName.trim(),
				// 	password: t.password.trim(),
				// 	msgCode: t.msgCode.trim(),
				// 	ymid: t.ymid.trim()
				// }

				t.$fetch.request('userInfo/save', t.entity, "POST").then((res) => {
					console.info(res)
					if (res.code == 200) {
						console.info("注册成功")
						$common.showToast(t.$t('register.registerSuccess'), 1);
						setTimeout(function() {
							$common.toPage(t.$base.pagePath().login.login)
						}, 1000)

					} else {
						$common.showToast(res.msg);
						t.isRotate = false
					}
				}).catch((e) => {})
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.padding-xl {
		color: #E6EEFF;
		border-bottom: 1px solid #40576f;
	}

	.bg-white {
		background-color: #031725;
		color: var(--white);

	}

	.cu-dialog {
		background-color: #031725;
	}

	.main-list {
		color: #E6EEFF;
		background-color: #172434;
		margin-top: 5px;
	}

	.uni-input-:placeholder {
		color: var(--et_font);
	}

	input {
		color: #E6EEFF !important;
	}

	.cuIcon cuIcon-radiobox {}

	.header {
		margin-top: 10%;
	}

	.dlbutton {
		margin-top: 25px !important;
	}
</style>
